import React, { useState, useEffect } from 'react';
import { Form, Input, Button, ImageUploader, TextArea } from 'antd-mobile';
import { AddOutline, DownOutline, UpOutline } from 'antd-mobile-icons';
import TagGroup from '../components/TagGroup';
import styles from './index.module.less';
import HeaderNav from "@/components/header-nav"
import { beforeUpload } from '@/utils/validate';
import { showErrorToast } from '@/utils/customToast';
const { getUserWorldBookDetails, editWorldRole } = $globalServicer('world')
import { handleImageUpload } from '@/utils/upload'
const WorldCreationForm = () => {
  const customNavigate = $globalNavigate()
  const [params] = useSearchParams();
  const [loading, setLoading] = useState(true)
  console.log("🚀 ~ ItemCrad ~ params:", params)
  const id = params.get('id');
  const [form] = Form.useForm();
  const [worldInfo, setWorldInfo] = useState(null)
  const [submitting, setSubmitting] = useState(false);
  useEffect(() => {
    getUserWorldBookDetails(id).then(res => {
      console.log(`------res`, res)
      setWorldInfo(res)
      form.setFieldsValue({
        world_cover: [{
          url: res.world_cover,
          path: res.world_path
        }],
        world_name: res.world_name,
        world_description: res.world_description,
        world_character: res.world_character,
      })
    });
  }, [])
  const onFinish = (values) => {
    console.log('Form values:', values);
    if (submitting) return; // 如果正在提交，直接返回
    try {
      const formData = {  
        ...values,
        world_cover: values.world_cover[0].path,
        id
      }
      console.log('Form values:', formData);
      setSubmitting(true);
      editWorldRole(formData).then(res => {
        console.log(`update------res`, res)
        customNavigate(-1)
      })
    } catch (error) {
      showErrorToast('提交失败，请重试');
    } finally {
      setSubmitting(false);
    }
  };
  return (
    <div className={styles.formContainer}>
      <div className="header">
        <HeaderNav backArrow={true} title="世界概览"></HeaderNav>
      </div>
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div className={styles.footer}>
            <Button className={styles.submitButton}
              type='submit'
              loading={submitting}
              disabled={submitting}
            >{submitting ? '提交中...' : '完成'}</Button>
          </div>
        }
      >
        <Form.Item name="world_cover" label="世界图片" className={styles.imageItem}>
          <ImageUploader 
            className={styles.uploadWrapper} 
            upload={handleImageUpload} 
          />
        </Form.Item>
        <Form.Item name="world_name" label="世界名称" help='字数上限10'>
          <Input placeholder="输入世界名称，例1北方小镇，例2玄天大陆。（字数上限10）" maxLength={10} />
        </Form.Item>
        <Form.Item name="world_description" label="世界描述" help='字数上限3000'>
          <TextArea placeholder="输入世界描述，例1北方小镇是一座偏远宁静的地方。例2玄天大陆是一座妖族与练气士共存的大陆。（字数上限3000）" rows={3} maxLength={3000} />
        </Form.Item>
        <Form.Item name="world_character" label="用户扮演角色" help='字数上限800'>
          <Input placeholder="输入你所扮演的角色，并加入简单描述，例如：小帅，男，小美的男朋友，会定身术。（字数上限800）" maxLength={800} />
        </Form.Item>
      </Form>
    </div>
  );
};

export default WorldCreationForm;